<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        body {
            height: 3000px;
        }

        .area {
            width: 300px;
            height: 200px;
            overflow-y: scroll;
        }

        .header {
            margin-top: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>

    <div class="header">
        ha
    </div>
    <br>
    <div class="area">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti a doloremque atque et praesentium architecto, possimus, commodi illo magnam quisquam explicabo iusto eligendi dicta vel omnis facere. Nisi modi ipsum possimus libero maxime ducimus velit, a minima deleniti, consectetur voluptatum, animi error sed ipsa autem nemo accusamus laborum. Perspiciatis a voluptatem eveniet rerum? Vero fugiat laboriosam quidem quam quis nihil temporibus quasi natus quibusdam! Corrupti deserunt itaque in! Libero sunt optio nulla dolore inventore quo exercitationem architecto excepturi modi pariatur consequuntur tempore, rem iusto amet, consectetur minus voluptate aut ducimus porro accusamus voluptates suscipit enim. Reprehenderit excepturi corporis aliquam omnis alias tempore aperiam repellat accusantium nostrum cupiditate laudantium, dolor voluptatem earum illo sequi eos eligendi temporibus magnam, molestiae et. Maiores recusandae iste animi quidem quam dolores nam illo, enim odio dolore temporibus, non repellat eos laboriosam atque. Unde cumque voluptatibus amet eos quisquam voluptates ducimus. Tempore porro architecto quam exercitationem natus sequi perspiciatis adipisci, dolor, iusto cumque, dolores unde. Officiis voluptatum quaerat culpa commodi mollitia? Maxime nemo voluptatum aspernatur ratione officia nostrum itaque asperiores vero! Mollitia assumenda explicabo libero quia deleniti dolorem accusamus molestiae reiciendis aut molestias iste, cumque provident quisquam nam quas repellat atque eaque velit numquam? Possimus reiciendis eius, nihil quidem beatae soluta earum et impedit, consectetur optio labore quos? Aperiam ipsum natus porro quos neque, asperiores a recusandae iste cumque est id quas quis. Ab molestiae, nesciunt voluptate minus ratione inventore adipisci unde quis, fugit magni reprehenderit expedita tempora obcaecati maxime a neque odio! Similique ut nemo eius expedita officiis sint ducimus deserunt, reiciendis qui facilis assumenda, eaque eos, et id ex minima modi corrupti minus ab veniam laboriosam rem aliquam recusandae optio. Eligendi quis nisi ea obcaecati laudantium numquam nostrum ducimus in ex omnis magni iste, culpa, similique dignissimos labore maiores aperiam. Earum quia dignissimos delectus.
    </div>

<script>
    window.addEventListener("scroll", function() {
        // console.log("滚动事件")

        // 拿到整个页面的滚动距离
        // 实际上拿到的是html标签对象
        console.log(document.documentElement.scrollTop)
        if (document.documentElement.scrollTop >= 100) {
            document.querySelector(".header").style.backgroundColor = "green"

            // 可以给滚动条赋值，控制页面的位置
            // document.documentElement.scrollTop = 0
        } else {
            document.querySelector(".header").style.backgroundColor = "red"
        }
    })

    const div = document.querySelector("div")
    div.addEventListener("scroll", function() {
        // console.log("div滚动")
        
        // 打印因为滚动被隐藏的高度
        console.log(div.scrollTop)
    })
</script>
</body>
</html>